<template>
  <div class="rightTop">
    <div class="title">
      <span class="word">设备在线分析</span>
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          value-format="YYYY-MM-DD"
          @change="changetoptime"
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>
    <div class="line"></div>
    <div class="pic1">
      <div class="box1">
        <ul>
          <li>当前总数</li>
          <li>当前启用数</li>
          <li>当前在线数</li>
        </ul>
        <ul class="ul2">
          <li>260</li>
          <li>260</li>
          <li>250</li>
        </ul>
      </div>
      <div class="charts">
        <scEcharts id="chartDom" width="800px" height="200px" :option="option">
        </scEcharts>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive,onMounted, ref } from "vue";
import scEcharts from "@/components/scEcharts";
import { ProjectGroupone } from "@/api/model/echarts";
import {useStore} from 'vuex'
var store=useStore()
var value1=ref()
onMounted(()=>{
  var data1= JSON.parse(sessionStorage.getItem("data1"))
  var data2= JSON.parse(sessionStorage.getItem("data2"))
  var data3= JSON.parse(sessionStorage.getItem("data3"))
  var daylist=JSON.parse(sessionStorage.getItem("daylist"))
  if(data1){
    // console.log([data1])
    option.series[0].data=data1
  }
  if(data2){
    option.series[1].data=data2
  }
  if(data3){
    option.series[2].data=data3
  }
  if(daylist){
    option.xAxis.data=daylist
  }
})
var option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    x: "right",
    left: "60%",
    top: "4%",
    icon: "rect",
    itemWidth: 30,
    itemHeight: 1,
    data: ["当前总数", "当前启用数", "当前在线数"],
  },
  xAxis: {
    type: "category",

    data: [
      "4/20",
      "4/21",
      "4/22",
      "4/23",
      "4/24",
      "4/25",
      "4/26",
      "4/27",
      "昨日",
      "今日",
    ],
  },
  yAxis: {
    axisLine: {
      show: true,
    },
    type: "category",
  },
  series: [
    {
      name: "当前总数",
      type: "line",
      color: "rgb(221, 221, 221)",
      stack: "Total",
      data: store.state.project.data1,
    },
    {
      name: "当前启用数",
      color: "rgb(249, 195, 0)",
      type: "line",
      stack: "Total",
      data: store.state.project.data2,
    },
    {
      name: "当前在线数",
      color: "rgb(207, 0, 0)",
      type: "line",
      stack: "Total",
      data: store.state.project.data3,
    },
  ],
});
const changetoptime=(val)=>{
  console.log(val,'123')
  if(val==null){
    getdatatop("1900-01-01","2023-01-02")
  }
  value1.value=val
  // console.log(moment(val).format('YYYY-MM-DD HH:mm:ss'))
  getdatatop(val[0],val[1])

}
const getdatatop = async (start,end) => {
  var res = await ProjectGroupone({
    indicatorName: "设备在线分析",
    firstType: "项目概述",
    secondType: "",
    type: "day",
    thirdType: "",
    dataType: "day",
    dayFrom: start,
    dayTo: end,
    project_id: sessionStorage.getItem("proid"),
  });
  // console.log(res)
  var xlist=[]
  res.data.commonDailyDataList.forEach((item)=>{
    item.day=`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`
    if(!xlist.includes(item.day)){
      xlist.push(item.day)
    }
  })
  option.xAxis.data=xlist
  // sessionStorage.setItem("daylist",JSON.stringify(xlist))
  var type1 = res.data.commonDailyDataList.filter((item) => {
    return item.type == "type1";
  });
  var type2 = res.data.commonDailyDataList.filter((item) => {
    return item.type == "type2";
  });
  var type3 = res.data.commonDailyDataList.filter((item) => {
    return item.type == "type3";
  });
  var data1 = [];
  var data2 = [];
  var data3 = [];
  type1.forEach((item) => {
    data1.push(item.number1);
  });
  type2.forEach((item) => {
    data2.push(item.number1);
  });
  type3.forEach((item) => {
    data3.push(item.number1);
  });
  option.series[0].data=data1
  option.series[1].data=data2
  option.series[2].data=data3
  // sessionStorage.setItem("data1", JSON.stringify(data1));
  // sessionStorage.setItem("data2", JSON.stringify(data2));
  // sessionStorage.setItem("data3", JSON.stringify(data3));
};
</script>

<style scoped lang="less">
.pic1 {
  display: flex;
}
ul {
  list-style: none;
}
.rightTop {
  width: 100%;
  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  padding: 10px;
  line-height: 23px;
  font-weight: normal;
  font-style: normal;
  background-color: rgb(255, 255, 255);
  .title {
    padding: 13px;
    display: flex;
    position: relative;
    position: relative;
    justify-content: space-between;
    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 30px;
      text-decoration: none;
    }
  }
  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }
  
  .box1 {
    width: 250px;
    display: flex;
    height: 100%;
    padding-left: 40px;
    padding-top: 45px;
    ul {
      padding: 5px;
      float: left;
      li {
        margin: 10px;
        padding-bottom: 20px;
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 14px;
        color: rgb(126, 126, 126);
        font-style: normal;
        letter-spacing: 0px;
        // line-height: 20px;
        text-decoration: none;
      }
    }
    /deep/.el-button > span {
      color: white;
      display: inline-flex;
      align-items: center;
    }
    .ul2 {
      // padding: 10px;
      float: left;
      li {
        margin: 10px;
        font-family: SourceHanSansSC;
        font-weight: 500;
        font-size: 22px;
        color: rgb(58, 124, 206);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 20px;
        text-decoration: none;
      }
    }
  }
}
.charts {
  padding-top: 10px;
}

.pic1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
<style >
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.el-date-editor--daterange.el-input__inner {
  width: 230px;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
